<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
        <span style="margin-left: 10px">课程详情</span>
      </div>
      <div class="title">
        <span>课程基本信息</span>
      </div>
      <div class="cell">
        <div class="input">
          <p class="key">课程名称：</p>
          <p class="val">职业健康接害人员（换证）</p>
        </div>
        <div class="input">
          <p class="key">培训类型：</p>
          <p class="val">职业健康</p>
        </div>
      </div>
      <div class="cell">
        <div class="input">
          <p class="key">行业类型：</p>
          <p class="val">危险化学品</p>
        </div>
        <div class="input">
          <p class="key">岗位类型：</p>
          <p class="val">接触职业病危害劳动者</p>
        </div>
      </div>
      <div class="cell">
        <div class="input">
          <p class="key">培训等级：</p>
          <p class="val">换证</p>
        </div>
        <div class="input">
          <p class="key">企业类型：</p>
          <p class="val">建设单位</p>
        </div>
      </div>
      <div class="cell">
        <div class="input">
          <p class="key">课程详情：</p>
          <p class="val">职业健康接害人员（换证）(安知)</p>
        </div>
      </div>
      <div class="cell">
        <div class="input">
          <p class="key">课程图片：</p>
          <img
            class="val_img"
            src="https://gips2.baidu.com/it/u=135327047,199569105&fm=3028&app=3028&size=w931&q=75&n=0&f=PNG&fmt=auto&maxorilen2heic=2000000"
            alt=""
          />
        </div>
      </div>
      <div class="cell">
        <div class="input">
          <p class="key">讲师备注：</p>
          <p class="val">无</p>
        </div>
      </div>
      <div class="cell">
        <div class="input">
          <p class="key">备注：</p>
          <p class="val">--</p>
        </div>
      </div>
      <div class="title">
        <span>课程章节</span>
      </div>
      <el-tree :data="chapterData" node-key="id" default-expand-all :expand-on-click-node="false" style="margin-bottom: 60px">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <i class="el-icon-video-play" v-if="node.level == 2"></i>
          <span>{{ data.name }}</span>
          <span class="tree_btn">
            <el-button size="mini" type="primary" v-if="node.level != 1">预览</el-button>
          </span>
        </span>
      </el-tree>
    </el-card>
    <div class="footer">
      <el-button @click="back" type="primary">返回</el-button>
      <el-button type="primary">加入我的课程</el-button>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
export default {
  name: 'addTeacher',
  data() {
    return {
      chapterData: [
        {
          id: 1,
          index: 1,
          name: '（2025）危险化学品经营单位安全生产管',
          children: [
            {
              id: 4,
              index: 1,
              index2: 1,
              name: '特种设备安全技术-锅炉安全技术',
            },
          ],
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    back() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.title > span {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.cell {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
}
.input {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.input:nth-child(2) {
  margin-left: 40px;
}
.key {
  width: 120px;
  text-align: right;
  flex-shrink: 0;
}
.val {
  margin-left: 10px;
}
.val_img {
  margin-left: 10px;
  width: 250px;
}
.el-icon-video-play,
.el-icon-document {
  margin-right: 5px;
}
.custom-tree-node{
  width: 500px;
  display: flex;
  align-items: center;
}
.tree_btn {
  flex-shrink: 0;
  margin-left: auto;
}
.footer {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 210px;
  border-top: 1px solid #e6e6e6;
}
</style>
